<template>
  <div class="layout" :style="{'min-height': windowHeight}">
    <Layout>
      <Header class="header">
        <Menu mode="horizontal" theme="dark" active-name="1" :class="widthBool? 'width1200': ''">
          <div class="layout-logo">
            <img src="../../static/img/logo.jpg" style="height: 60px; width: 157px;">
          </div>
          <div class="layout-nav">
            <HeaderRight @on-click="setWidth" :widthBool="widthBool" />
          </div>
        </Menu>
      </Header>
      <Layout :class="widthBool? 'width1200': ''">
        <Sider hide-trigger :style="{background: '#495060', 'min-height': leftNavHeight, float: 'left'}">
          <Menu :active-name="activeName" theme="dark" width="auto" @on-select="toPath" :open-names="['1']">

            <MenuItem name="/prepareLessons">
              <Icon type="ios-bookmarks-outline"></Icon>
              <span>我的备课</span>
            </MenuItem>
            <MenuItem name="/prepareLessons/subject">
              <Icon type="ios-list-outline"></Icon>
              <span>教学题目</span>
            </MenuItem>
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-keypad-outline"></Icon>
                <span>教学素材</span>
              </template>
              <MenuItem name="/prepareLessons/paper">教学试卷</MenuItem>
              <MenuItem name="1-2">教学活动</MenuItem>
              <MenuItem name="1-3">教学资源</MenuItem>
            </Submenu>
            <MenuItem name="/subject">
              <Icon type="ios-analytics-outline"></Icon>
              <span>课堂教学设计</span>
            </MenuItem>
          </Menu>
        </Sider>
        <Layout style="padding: 10px; overflow: inherit;" :style="{width: widthBool? '1000px': 'auto', float: 'left'}">
          <div :style="{'min-height': rightNavHeight}"><router-view/></div>
          <div style="text-align: center; line-height: 45px;">
            版权所有 © Copyright 2018 华北科技学院
            <span v-if="isIE" style="color: #ed3f14;">尽量不要使用 <b style="font-size: 16px">IE</b> 内核浏览器</span>
          </div>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  import HeaderRight from '../components/HeaderRight'
  export default{
    components: {
      HeaderRight
    },
    created() {
      this.activeName = this.$route.meta.menuName || '/'
      if (this.isIE) {
        this.widthBool = true
      }
    },
    computed: {
      isIE() {
        return !!window.ActiveXObject || "ActiveXObject" in window
      },
      windowHeight() {
        return document.documentElement.clientHeight + 'px'
      },
      leftNavHeight() {
        return (document.documentElement.clientHeight - 60) + 'px'
      },
      rightNavHeight() {
        return (document.documentElement.clientHeight - 125) + 'px'
      },
    },
    data() {
      return {
        activeName: '/',
        widthBool: false
      }
    },
    methods: {
      toPath(path) {
        this.$router.push({path})
      },
      setWidth() {
        this.widthBool = !this.widthBool
      }
    }
  }
</script>
<style scoped>
  .header{
    background: #2990fa;
    height: 60px;
    line-height: 60px;
    padding: 0px;
  }
  .header .ivu-menu-dark{
    background: none !important;
  }
  .layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
  }
  .layout-logo{
    width: 157px;
    height: 60px;
    float: left;
    position: relative;
    top: 0px;
    left: 0px;
  }
  .layout-nav{
    float: right;
    margin: 0 auto;
    margin-right: 10px;
  }
  .header .ivu-menu-horizontal{
    height: 60px;
    line-height: 60px;
  }
  .layout-nav .ivu-menu-item{
    font-size: 16px !important;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active{
    border-right: 0px none;
    background: #2d8cf0;
    color: #fff !important;
    margin: 5px;
  }
  .ivu-menu-vertical.ivu-menu-light:after{
    width: 0px;
  }
  .set-width{
    font-size: 24px;
    color: #fff;
    display: block;
    line-height: 60px;
    cursor: pointer;
  }
  .width1200{
    width: 1200px;
    margin: 0px auto;
  }
</style>
